import { RuleItem } from "async-validator";
import { Children, createContext, useState } from "react";

type ArrayAble<T> = T | T[];
export interface FormItemRule extends Partial<RuleItem> {
  trigger?: ArrayAble<string>;
}
export type formItemValidateState = "success" | "error" | "";
export interface FormItemProps {
  label?: string;
  name?: string;
  rules?: FormItemRule[];
  children?: React.ReactNode;
  showMessage?: boolean;
}

interface FormItemContextProps extends FormItemProps {
  validate?: (
    trigger: string,
    callback: (isValid?: boolean) => void
  ) => Promise<void>;
}
export const FormItemContext = createContext<FormItemContextProps>({});
const FormItem = (props: FormItemProps) => {
  const { label, name, rules, children, showMessage } = props;
  const validate = async (
    trigger: string,
    callback: (isValid?: boolean) => void
  ) => {
    console.log(trigger, callback);
  };
  const passedContext: FormItemContextProps = {
    ...props,
    validate,
  };
  const [validateMessage, setValidateMessage] = useState("");
  return (
    <div>
      <FormItemContext.Provider value={passedContext}>
        <label>{label}</label>
        <div>{children}</div>
        <div>{validateMessage}</div>
      </FormItemContext.Provider>
    </div>
  );
};

FormItem.defaultProps = {};
export default FormItem;
